<template>
  <Row>
    <Col span="24" class="tableContent">
      <table border class="table detailTable">
        <thead>
        <tr>
          <th>{{ $t('ledger.Category') }}</th>
          <th>{{ $t('ledger.ScoreWeight') }}</th>
          <th>{{ $t('ledger.ScoringItem') }}</th>
          <th>{{ $t('ledger.Score') }}</th>
          <th>{{ $t('ledger.Equivalence') }}</th>
          <th>{{ $t('ledger.Metrics') }}</th>
        </tr>
        </thead>
        <tbody v-for="item in detailList">
        <template>
          <tr :key="item.id">
            <td rowspan="17">{{ `${item.categoryName}(${item.categoryRate}%)` }}</td>
          </tr>
          <template v-for="scoreItem in item.dmsDeviceScoreItemList">
            <tr :key="scoreItem.id">
              <td :rowspan="scoreItem.dmsDeviceScoreStandardList.length + 1">
                {{ `${scoreItem.itemShortName}(${scoreItem.itemRate}%)` }}
              </td>
              <td :rowspan="scoreItem.dmsDeviceScoreStandardList.length + 1">{{ scoreItem.itemName }}</td>
              <td :rowspan="scoreItem.dmsDeviceScoreStandardList.length + 1">{{ scoreItem.score }}</td>
              <td :rowspan="scoreItem.dmsDeviceScoreStandardList.length + 1">{{ scoreItem.convertScore }}</td>
            </tr>
            <template v-for="standItem in scoreItem.dmsDeviceScoreStandardList">
              <tr :key="standItem.id">
                <td>
                  {{ `${standItem.grade}: ${standItem.standardDesc}` }}
                </td>
              </tr>
            </template>
          </template>
        </template>
        </tbody>
        <tfoot>
        <tr>
          <td>总分</td>
          <td colspan="5">{{ sumCount }}</td>
        </tr>
        </tfoot>
      </table>
    </Col>
  </Row>
</template>

<script>
export default {
  name: "commentscore",
  props: {
    scoreId: {
      type: String,
      default: () => ''
    },
    sourceType: {
      type: String,
      default: () => 0
    },
    dmsDeviceScoreConfigId: {
      type: String,
      default: () => ''
    },
    scoreData:{
      type: Array,
      default: () => []
    },
    dataSource:{
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      detailObj: {},
      detailList: [],
      sumCount: 0
    }
  },
  mounted() {
    if (this.dataSource === 'list'){
      this.detailObj = this.scoreData
      this.detailList = [this.scoreData]
      this.getCount(this.detailList);
    }else{
      this.getDetail()
    }

  },
  methods: {
    getCount(dataList) {
      this.sumCount = 0
      dataList.forEach(val => {
        if (val.dmsDeviceScoreItemList && val.dmsDeviceScoreItemList.length) {
          val.dmsDeviceScoreItemList.forEach(list => {
            this.sumCount += Number(list.convertScore)
          })
        }
      })
    },
    getDetail() {
      this.axios({
        method: 'get',
        url: '/dms/dmsDeviceScore/detail',
        params: {
          dmsDeviceId: this.scoreId,
          dmsDeviceScoreConfigId: this.dmsDeviceScoreConfigId,
          sourceType: this.sourceType
        }
      }).then(res => {
        this.detailObj = res.data
        this.detailList = res.data.dmsDeviceScoreCategoryList
        this.getCount(this.detailList);
        this.$emit('onLoad');
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.detailTable {
  margin-bottom: 0;
  padding-bottom: 0;
  border: #eee solid 1px;
  //border:none;
  thead tr th, tfoot tr td {
    text-align: center;
    font-size: 15px;
    border-color: #eee;
    border: #eee solid 1px;

  }

  tbody tr td {
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
    background: transparent !important;
    border: #eee solid 1px;
  }

  th {
    border-bottom: none;
  }
}
</style>
